<template>
  <div>
    <van-steps
      :active-icon="activeIcon"
      :active-color="activeColor"
      :direction="direction"
      :active="stepsList.length - 1"
    >
      <van-step v-for="(item, i) in stepsList" :key="i">
        <h3
          class="stepsTitle"
          v-if="direction == 'vertical'"
        >
        <span v-if="item.processNodeNameFrom && item.processNodeNameFrom.length > 0"> {{item.processNodeNameFrom}}</span>
        <span  v-if="item.statusName && item.statusName.length > 0">-</span>
         <span v-if="item.statusName && item.statusName.length > 0">{{ item.statusName }}</span>
        </h3>
         <p
          class="stepsContent"
          v-if="
            direction == 'vertical' && item.statusName && item.statusName.length > 0 && i != 0
          "
        >
        核实意见：
          {{ item.statusName }}
        </p>
         <p
          class="stepsContent"
          v-if="
            direction == 'vertical' && item.approveComment && item.approveComment.length > 0 && i != 0
          "
        >
        备注：
          {{ item.approveComment }}
        </p>
        <p
          class="stepsContent"
          v-if="
            direction == 'vertical' && item.approveTime && item.approveTime.length > 0
          "
        >
          {{ item.approveTime }}
        </p>
        <span
          v-if="
            direction == 'horizontal' && item.processNodeNameTo && item.processNodeNameTo.length > 0
          "
          >{{ item.processNodeNameTo }}</span
        >
      </van-step>
    </van-steps>
  </div>
</template>

<script>
import { Step, Steps } from 'vant';
// 审批记录组件
export default {
  name: "commonSteps",
  components: {
    'van-steps':Steps,
    'van-step':Step,
  },
  data() {
    return {};
  },
  props: {
    // 横向horizontal和 竖向vertical
    direction: {
      require: false,
      default: "horizontal",
    },
    // 当前节点
    activeStep: {
      require: true,
      type: Number,
      default:0
    },
    // 流程节点
    stepsList: {
      type: Array,
      require: true,
      default: () => {
        return [
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
        ];
      },
    },
    activeColor: {
      type: String,
    },
    activeIcon: {
      type: String,
      default: "",
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.stepsTitle {
  margin: 0;
  font-weight: bold;
  font-size: 28px;
  text-align: left;
}

/deep/ .van-step--horizontal {
  display: flex;
}
/deep/ .stepsContent {
  color: #969799;
  font-size: 26px;
  margin: 5px 0 ;
  font-weight: normal;
  text-align: left;
}
/deep/ .van-icon-circle {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  display: inline-block;
  background-color: #2184fe;
  position: relative;
}
/deep/ .van-icon-circle:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>